import { useState } from "react";
import styles from './index.less';
import { Button, Flex } from "antd";
import { motion, AnimatePresence } from 'motion/react';

export default () => {

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>鼠标悬浮</p>

                <motion.div
                    className={styles.motionView}
                    initial={{ opacity: 0.5, backgroundColor: '#FF34B3', scale: 1 }}
                    whileHover={{ opacity: 1, backgroundColor: '#1E90FF	', scale: 1.2 }}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>鼠标点击</p>

                <motion.div
                    className={styles.motionView}
                    initial={{ scale: 1, borderWidth: 0, borderColor: '#00000040', borderStyle: 'solid' }}
                    whileTap={{ scale: 0.8, borderWidth: 8}}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card2}>
                <p>inView视图进入</p>

                <div className={styles.inViewLayout}>
                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M1
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M2
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M3
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M4
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M5
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M6
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M7
                    </motion.div>

                    <motion.div
                        className={styles.motionView2}
                        initial={{ scale: 0.5, top: 30, opacity: 0 }}
                        whileInView={{ scale: 1, top: 0, opacity: 1 }}
                        transition={{ duration: 0.3 }}
                    >
                        M8
                    </motion.div>
                </div>
            </div>
        </div>
    );
}